<script lang="ts" setup>
import { ref, watch } from 'vue';

const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },

  delay: {
    type: Number,
    default: 500,
  },
});

const loadingStatus = ref(false);
let loadingTimer: ReturnType<typeof setTimeout>;

watch(() => props.loading,  (value) => {
  if (value) {
    loadingTimer = setTimeout(() => {
      loadingStatus.value = true;
    }, props.delay);
  }
  else {
    clearTimeout(loadingTimer);
    loadingStatus.value = false;
  }
});
</script>

<template>
  <template v-if="loadingStatus">
    <slot name="loading"></slot>
  </template>
  <template v-else>
    <slot></slot>
  </template>
</template>

<style lang="scss" scoped>
</style>
